<template>
   <el-container>
       <!-- 侧边菜单部分 -->
      
  <el-aside width="200">
     <h1 class="logo" style="height:60px"></h1>
<el-menu default-active="1-4-1" 
class="el-menu-vertical-demo" 

@open="handleOpen" 
@close="handleClose" 
:collapse="isCollapse">
  <el-menu default-active="$route.path"
                 class="el-menu-vertical-demo"
                 :router="true"
                 text-color="#e6cbd1"
                 ref="sideMenu"
                 active-text-color="hotpink"
                 :collapse="isCollapse">
    	<!-- //我们的组件 -->
          <qf-sub-menu :sideMenu='$store.state.sideMenu'></qf-sub-menu>
       <!-- <sideMenu :sideMenu="$store.state.sideMenu"></sideMenu> -->
        </el-menu>
</el-menu>

  </el-aside>
  <el-container>
      <!-- header顶部 -->
    <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="6"><div class="icon" >
    <!-- el-icon-s-unfold -->
    <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse"></i>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">千锋管理系统</div></el-col>
  <el-col :span="6">
    <b class="grid-content bg-purple"><b class="el-icon-user-solid"></b>{{$store.state.userInfo.nickname}}</b>
    <b class="quit">
      <a href="#" @click="quit">退出</a>
    </b>
  </el-col>
</el-row>
    </el-header>
    <!-- 主体内容部分 -->
    <el-main>
      <div class="beardCrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
  <el-breadcrumb-item v-for="item in $store.state.breadCrumb" :key="item.value"  :to="{ name:item.name }">{{item.meta.name}}</el-breadcrumb-item>
 
</el-breadcrumb>
      </div>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
import{getlog} from "../../api"
import sideMenu from "../../components/sideMenu"
export default{
  components:{
    sideMenu
  },
    data() {
      return {
        isCollapse: false
      };
      // return {
      //   tableData: Array(20).fill(item)
      // }
    },
    methods: {
      quit(e){
e.preventDefault()  //阻止a标签默认事件
//退出登录
//1.跳转到登录页
this.$router.push("/login")
//2.清空token
localStorage.removeItem('qf-token')
//3.刷新页面  目的：因为addRoutes之后，数据编译无法清空，会导致不同角度菜单混乱
location.reload()
      },
      handleOpen(key, keyPath) {
       // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
       // console.log(key, keyPath);
      }
    },
    beforeCreate () {
        getlog()
        .then(res=>{
           // console.log(res)
        })
    }
}
</script>
<style  >
.icon {
  cursor: pointer;
  font-size: 36px;
  text-align: left;
}
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-header, .el-footer {
    background-image: linear-gradient(61deg ,#e6cbd1,#f7a3bf);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-menu{
    background-color: #5a5859;
  }
  .el-aside {
    background-color: #58595a;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
element.style {
  color:antiquewhite
}
  .el-main {
    background-color: white;
    color: #333;
    /* text-align: center; */
    /* line-height: 60px; */
  }

  .el-container {
    margin-bottom: 40px;
    height: 100%;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>